import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
  Image,
  Alert
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import CommonListPage from '../common/CommonListPage';
import CommonAvatarView from '../common/CommonAvatarView';
import {DateUtils} from '../../utils/Utils';
import ToastUtils from '../../common/ToastUtils';
import QZ_RequestQuanziListAction from '../../actions/quanzi/QZ_RequestQuanziListAction';
import QuanziSendShoucangQuanziAction from '../../actions/quanzi/QuanziSendShoucangQuanziAction1';
import CommonCheckUserTypeAction from '../../actions/common/CommonCheckUserTypeAction';
import QZ_RequestQuanziHotListAction from '../../actions/quanzi/QZ_RequestQuanziHotListAction';
import QZ_MyCreatedListAction from '../../actions/quanzi/QZ_MyCreatedListAction';
import QZ_MyManagedListAction from '../../actions/quanzi/QZ_MyManagedListAction';
import QZ_ApplyView from './QZ_ApplyView';
import QZ_ManagerView from './QZ_ManagerView';

export default class QZ_FindListPage extends CommonListPage {
	constructor(props) {
       super(props);
       this._isRowWrap = true;
	}
    componentWillUpdate(nextProps, nextState) {
      if(nextState.isChage) {
        nextState.isChage = false;
        ToastUtils.show(nextState.tdata.is_favorited===1?"成功退出圈子":"成功加入圈子");
        this.doRefresh();
      }
    }
  	_getViewStyle() {
      return {paddingTop:Config.paddingTop,
        backgroundColor:"#fff"}
    }
  	_getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:10,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop),
        backgroundColor:"#fff"};
    }
    _renderBottomView() {
        return(<QZ_ApplyView ref={ref => (this._applyView = ref)} />);
    }
    _renderBottomView1() {
        return(<QZ_ManagerView doRefresh={this._doRefresh.bind(this)} ref={ref => (this._managerView = ref)} />);
    }
    _onPressItem(data) {
      this.gotoPage(Config.pages.quanzi_content, data)
    }
    _doRefresh(){
      this.doRefresh();
    }
    _onRenderItem(data, index) {
    	return (
      <TouchableOpacity key={'hotc'+index} onPress={()=>{this._onPressItem(data)}}
          style={{overflow:'hidden',
          width:(SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(60))/2,
          height:SizeUtils.translateDesignHeightToCode(this.props.pageData.routeData.type==='creat'?230:180),
          marginTop:SizeUtils.translateDesignHeightToCode(index>1?20:0),
          paddingLeft:SizeUtils.translateDesignWidthToCode(10),
          paddingRight:SizeUtils.translateDesignWidthToCode(10),
          marginLeft:SizeUtils.translateDesignWidthToCode(20),
          borderWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#eeeeee",
          borderRadius:2,}}>
          <View style={{
            flex:1,
            flexDirection:'row',
            alignItems: 'center',}}>
          <CommonAvatarView avatarUri={this._getImageSource(data)} size={110}/>
          <View style={{
            height:SizeUtils.translateDesignHeightToCode(110),
            marginLeft:SizeUtils.translateDesignWidthToCode(10),
            flex:1,
          }}>
            <Text numberOfLines={1}
              style={[CommonStyles.primaryText, {marginTop:SizeUtils.translateDesignHeightToCode(10),
                  color:'#000',fontSize:SizeUtils.translateFontSizeToCode(24),}]}>
              {data.title}
            </Text>
            <Text numberOfLines={2}
              style={[CommonStyles.primaryText, {marginTop:SizeUtils.translateDesignHeightToCode(10),
                  lineHeight:SizeUtils.translateDesignHeightToCode(25),
                  color:'gray' ,fontSize:SizeUtils.translateFontSizeToCode(20),}]}>
              {data.desc}
            </Text>
          </View>
        </View>
        {this._BottomView(data)}
        {
          this.props.pageData.routeData.type==='creat'?<View style={{height:SizeUtils.translateDesignHeightToCode(50),
          borderTopWidth: SizeUtils.translateDesignNumToCode(3),
          borderTopColor: '#eeeeee',
          flexDirection:'row',}}>
          <TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',
            borderRightWidth: SizeUtils.translateDesignNumToCode(3),
            borderRightColor: '#eeeeee',}} onPress={() => {
              if (data.state===0) {
                ToastUtils.show('此圈子正在审核中请耐心等待')
                return;
              }
              this._applyView&&this._applyView.open(data.board_id)}}>
            <Text style={{color:'#6699CC'}}>申请解散</Text>
          </TouchableOpacity >
          <TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',}}
            onPress={() => {
              if (data.state===0) {
                ToastUtils.show('此圈子正在审核中请耐心等待')
                return;
              }
              this._managerView&&this._managerView.open(data.board_id,data.no_check)}}>
            <Text style={{color:'#6699CC'}}>设置</Text>
          </TouchableOpacity>
          </View>:null
        }
      </TouchableOpacity>
    );
    }
    _BottomView=(data)=>(
    <View style={{flexDirection:'row',
        paddingLeft:SizeUtils.translateDesignWidthToCode(10),
        marginBottom:SizeUtils.translateDesignHeightToCode(14),alignItems: 'center',}}>
        <View style={{flexDirection:'row',alignItems: 'center',justifyContent: 'center',}}>
        <TImage source={require("../../../resource/images/activity/persion.png")} 
            style={{width:20,height:20,}}/>
        <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(24)}]}>
          {' '+data.favoriters_num}
        </Text>
        <TImage source={require("../../../resource/images/home/jianyi.png")} 
            style={{marginLeft:10,width:25,height:25,}}/>
        <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(24)}]}>
          {' '+data.post_comment_num}
        </Text>
      </View>
        {this._renderContentItemTagPer(data.is_favorited===1?true:false,data)}
    </View> 
  );
  //标签
  _renderContentItemTagPer(isjoin,data) {
    if (this.props.pageData.routeData.type==='creat') {return}
    return (
      <View style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
        backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(30),
        height:SizeUtils.translateDesignHeightToCode(30),
        borderColor:isjoin?'#1ac60c':'#ee3535', borderWidth:0.5, marginRight:SizeUtils.translateDesignWidthToCode(10),
        flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <TouchableOpacity onPress={this._shoucangQuanzi.bind(this,data)}>
          <Text style={{color:isjoin?'#1ac60c':'#ee3535', fontSize:SizeUtils.translateFontSizeToCode(22),
            textAlign:"center",
              marginLeft:SizeUtils.translateDesignWidthToCode(10), marginRight:SizeUtils.translateDesignWidthToCode(10)}}>
            {isjoin?'已加入':'加入'}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
  _shoucangQuanzi(data){
    new CommonCheckUserTypeAction().call(this, {needLogin:true, needVerify:true}, this._onCheckIsUserCallback.bind(this,data))
  }

  _onCheckIsUserCallback(data,result){
    if(result) {
          let msg = data.is_favorited===1? "是否确定退出圈子？" : "是否确定加入圈子？";
    Alert.alert('提示', msg, [
        {text:'确定',onPress:()=>{
          new QuanziSendShoucangQuanziAction().call(this, {tdata:data,board_id:data.board_id})
        }},
        {text:'取消',onPress:()=>{}}
      ])
    }
  }
  _getImageSource(data) {
    if(data.image_url) {
      return {uri:data.image_url};
    }
    else if (data.image_urls && data.image_urls && data.image_urls.length > 0) {
      return {uri:data.image_urls[0]};
    }
    else {
      return {uri:""};
    }
  }
  _getQuanziImageSource(data) {
    if(data.avatar_url) {
      return {uri:data.avatar_url};
    }
    else {
      return {uri:""};
    }
  }
    _requestData(page, listView) {
      const type = this.props.pageData.routeData.type;
      if (type==='hot') {
        new QZ_RequestQuanziHotListAction().call(listView, {page:page})
      }else if (type==='creat') {
        new QZ_MyCreatedListAction().call(listView, {page:page,page_size:20})
      }else if (type==='manag') {
        new QZ_MyManagedListAction().call(listView, {page:page,page_size:20})
      }else if (type==='shoucang') {
        new QZ_RequestQuanziListAction().call(listView, { page: page })
      }
    }
}